<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .success { color: #28a745; }
        .error { color: #dc3545; }
        .info { color: #17a2b8; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        pre {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>🔐 登录功能测试</h1>
    
    <div class="test-section">
        <h2>1. 测试数据检查</h2>
        <button onclick="checkTestData()">检查测试数据</button>
        <div id="dataStatus"></div>
    </div>

    <div class="test-section">
        <h2>2. 登录测试</h2>
        <div>
            <label>用户名: <input type="text" id="username" value="admin" placeholder="输入用户名"></label><br><br>
            <label>密码: <input type="password" id="password" value="123456" placeholder="输入密码"></label><br><br>
            <button onclick="testLogin()">测试登录</button>
        </div>
        <div id="loginStatus"></div>
        <div id="loginResult"></div>
    </div>

    <div class="test-section">
        <h2>3. 数据库查询测试</h2>
        <button onclick="testDatabaseQuery()">测试数据库查询</button>
        <div id="dbStatus"></div>
        <div id="dbResult"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8080';
        
        async function checkTestData() {
            const statusDiv = document.getElementById('dataStatus');
            statusDiv.innerHTML = '<div class="info">正在检查测试数据...</div>';
            
            try {
                // 检查用户数据
                const response = await fetch(`${API_BASE_URL}/user/get-username?username=admin`);
                const data = await response.json();
                
                if (data) {
                    statusDiv.innerHTML = `
                        <div class="success">✅ 用户数据存在</div>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                } else {
                    statusDiv.innerHTML = '<div class="error">❌ 用户数据不存在</div>';
                }
            } catch (error) {
                statusDiv.innerHTML = `<div class="error">❌ 检查失败: ${error.message}</div>`;
            }
        }
        
        async function testLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const statusDiv = document.getElementById('loginStatus');
            const resultDiv = document.getElementById('loginResult');
            
            statusDiv.innerHTML = '<div class="info">正在测试登录...</div>';
            resultDiv.textContent = '';
            
            try {
                const response = await fetch(`${API_BASE_URL}/user/login`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
                });
                
                const data = await response.json();
                
                if (data.code === '1') {
                    statusDiv.innerHTML = '<div class="success">✅ 登录成功</div>';
                    resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                } else {
                    statusDiv.innerHTML = `<div class="error">❌ 登录失败: ${data.message}</div>`;
                    resultDiv.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                }
            } catch (error) {
                statusDiv.innerHTML = `<div class="error">❌ 登录请求失败: ${error.message}</div>`;
                resultDiv.textContent = error.message;
            }
        }
        
        async function testDatabaseQuery() {
            const statusDiv = document.getElementById('dbStatus');
            const resultDiv = document.getElementById('dbResult');
            
            statusDiv.innerHTML = '<div class="info">正在测试数据库查询...</div>';
            resultDiv.textContent = '';
            
            try {
                // 测试不同的查询方式
                const queries = [
                    { name: '通过用户名查询', url: '/user/get-username?username=admin' },
                    { name: '通过UID查询', url: '/user/get-uid?uid=1001' }
                ];
                
                let results = [];
                
                for (const query of queries) {
                    try {
                        const response = await fetch(`${API_BASE_URL}${query.url}`);
                        const data = await response.json();
                        results.push({
                            query: query.name,
                            success: true,
                            data: data
                        });
                    } catch (error) {
                        results.push({
                            query: query.name,
                            success: false,
                            error: error.message
                        });
                    }
                }
                
                statusDiv.innerHTML = '<div class="success">✅ 数据库查询测试完成</div>';
                resultDiv.innerHTML = `<pre>${JSON.stringify(results, null, 2)}</pre>`;
                
            } catch (error) {
                statusDiv.innerHTML = `<div class="error">❌ 数据库查询失败: ${error.message}</div>`;
                resultDiv.textContent = error.message;
            }
        }
    </script>
</body>
</html>
